<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:65:"F:\yxl\tp5.com\public/../application/admin\view\jquery\jlist.html";i:1561267751;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        /*分页*/
        .pagination {}

        .pagination li {display: inline-block;margin-right: -1px;padding: 7px;border: 1px solid #e2e2e2;min-width: 20px;margin-top:20px;text-align: center;}

        .pagination li.active {background: #009688;color: #fff;border: 1px solid #009688;}

        .pagination li a {display: block;text-align: center;}

        a{
            color: #FF00FF;
        }

        table{
            margin-top:30px;
            text-align:center;
        }

        select{
            text-align:center;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>

            <li class="layui-nav-item layui-this">
                <a href="javascript:;">功能</a>
                <dl class="layui-nav-child">
                    <dd><a href="<?php echo url('/admin/index/img'); ?>">轮播图</a></dd>
                    <dd><a href="<?php echo url('/admin/index/flow'); ?>">流加载</a></dd>
                    <dd><a href="<?php echo url('/admin/index/send_sms'); ?>">手机号验证</a></dd>
                    <dd><a href="<?php echo url('/admin/index/send_mail'); ?>">php邮箱验证</a></dd>
                </dl>
            </li>

            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" style="color:yellow">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">

                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="<?php echo url('login/loginout'); ?>">该退了</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">列表页面</a>
                    <dl class="layui-nav-child">
                        <dd><a href="<?php echo url('index/index'); ?>">博客列表</a></dd>
                        <dd><a href="<?php echo url('auth/index'); ?>">角色列表</a></dd>
                        <dd><a href="<?php echo url('jquery/jlist'); ?>">地区列表</a></dd>
                        <dd><a href="<?php echo url('nav/index'); ?>">图片列表</a></dd>
                        <dd><a href="<?php echo url('UserList/userlist'); ?>">管理员列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="<?php echo url('index/upload'); ?>">图片上传</a></li>
                <li class="layui-nav-item"><a href="<?php echo url('Chat/ChatList'); ?>">聊天室</a></li>
                <li class="layui-nav-item"><a href="<?php echo url('Jquery/Treeview'); ?>">树型菜单</a></li>
                <li class="layui-nav-item"><a href="<?php echo url('Jquery/add'); ?>">添加地区用户</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <!--<div style="padding: 15px;">内容主体区域</div>-->
       <!-- <table class="layui-hide" id="demo" lay-filter="test">

        </table>-->
        <center>
            <h1>省-市-县三级联动</h1>
            <select class="form-control m-b" id="p">
                <option value="0" data-id="0">请选择省</option>
                <?php if(is_array($data) || $data instanceof \think\Collection || $data instanceof \think\Paginator): $i = 0; $__LIST__ = $data;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$val): $mod = ($i % 2 );++$i;?>
                    <option value="<?php echo $val['region_id']; ?>" data-id="<?php echo $val['region_id']; ?>"><?php echo $val['region_name']; ?></option>
                <?php endforeach; endif; else: echo "" ;endif; ?>
            </select>

            <select class="form-control m-b" id="c" disabled>
                <option value="0" data-id="0">请选择市</option>
            </select>

            <select class="form-control m-b" id="a" disabled>
                <option value="0" data-id="0">请选择区或县</option>
            </select>
        </center>

        <table border="1" align="center" width="1100" cellspacing="0" id="arr">
        </table>
        <center>
            <?php echo $list->render(); ?>
        </center>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    var area_url = "<?php echo url('jquery/jlist'); ?>";
    $(function(){
        //省市区,三级联动  ---- begin -----
        $("#p").change(function(){
            var parent_id = $(this).find("option:selected").attr('data-id');
            //已经选择了省份，又不选择省份，改变属性
            if( '0' == parent_id){
                $("#pname").val('请选择省');
                $("#c").html('<option value="0" data-id="0">选择城市</option>').attr('disabled', true);
                $("#a").html('<option value="0" data-id="0">选择区或县</option>').attr('disabled', true);
            }
            if('0' == parent_id){
                return ;
            }
            $.post(area_url, {'code' : parent_id}, function(res){

                if(1 == res.code){
                    var _html = '<option value="0" data-id="0">选择城市</option>';
                    $.each(res.data, function(k, v){
                        _html += '<option value="' + v.region_name + '" data-id="' + v.region_id + '">' + v.region_name + '</option>';
                    });

                    $('#c').html(_html);
                }
            }, 'json');
            $("#c").removeAttr('disabled'); //去除不可选状态
            $("#a").html('<option value="0" data-id="0">选择区</option>').attr('disabled', true);
        });

        $("#c").change(function(){
            var cid = $(this).find("option:selected").attr('data-id');
            //已经选择了城市，又不选择城市，改变属性
            if( '0' == cid){
                $("#cname").val('');
                $("#a").html('<option value="0" data-id="0">选择区</option>').attr('disabled', true);
            }
            if( '0' == cid ){
                return ;
            }
            $.post(area_url, {'code' : cid}, function(res){
                if(1 == res.code){
                    var _html = '<option value="0" data-id="0">选择区</option>';
                    $.each(res.data, function(k, v){
                        _html += '<option value="' + v.region_name + '" data-id="' + v.region_id + '">' + v.region_name + '</option>';
                    });
                    $('#a').html(_html);
                }
            }, 'json');
            $("#a").removeAttr('disabled'); //去除不可选状态
        });

        $("#a").change(function(){
            var aid = $(this).find("option:selected").attr('data-id');
            if('0' == aid){
                $("#aname").val('');
            }
        });
        //---- end -----
    });

    //省级用户
    var province_id = "<?php echo url('jquery/region'); ?>";
    $(document).ready(function(){
        $("#p").blur(function(){
            var parent_id = $(this).find("option:selected").attr('data-id');
            $.post(province_id, {'code' : parent_id}, function(res){
                if(2 == res.code)
                {
                    $("thead").hide();
                }
                if(2 == res.code)
                {
                    $("tr").hide();
                    alert("无数据");
                }
                if(1 == res.code){
                    var str="";
                    str+='<thead>';
                    str+='<tr>';
                    str+='<th><button onclick="sel_check_box()">全反选</button><button onclick="send()">批量删除</button></th>';
                    str+='<th>ID</th>';
                    str+='<th>昵称</th>';
                    str+='<th>姓名</th>';
                    str+='<th>年龄</th>';
                    str+='<th>性别</th>';
                    str+='<th>添加时间</th>';
                    str+='<th>修改时间</th>';
                    str+='<th>所在地区</th>';
                    str+='<th>操作</th>';
                    str+='</tr>';
                    str+='</thead>';

                    $.each(res.data, function(k,v){
                        str+='<tr>';
                        str+='<td id="productTbody"><input type="checkbox" class="check" value="'+v.id+'"></td>';
                        str+='<td>'+v.id+'</td>';
                        str+='<td>'+v.nickname+'</td>';
                        str+='<td>'+v.username+'</td>';
                        str+='<td>'+v.age+'</td>';
                        str+='<td>'+v.sex+'</td>';
                        str+='<td>'+v.create_time+'</td>';
                        str+='<td>'+v.update_time+'</td>';
                        str+='<td>'+v.region_name+'</td>';
                        str+='<td>'+ '<a href="del?id='+v.id+'">删除</a>  |  '+'<a href="upd?id='+v.id+'">修改</a>'+'</td>';
                        str+="</td>";
                        str+='</tr>';
                    });
                    $("#arr").html(str);
                }
            }, 'json');
        })
    })

    //市级用户
    var city_id = "<?php echo url('jquery/city'); ?>";
    $(document).ready(function(){
        $("#c").blur(function(){
            var region_id = $(this).find("option:selected").attr('data-id');
            // alert(region_id);
            $.post(city_id, {'code' : region_id}, function(res){
                if(2 == res.code)
                {
                    $("thead").hide();
                }
                if(2 == res.code)
                {
                    $("tr").hide();
                    alert("无数据");
                }
                if(1 == res.code){
                    var str="";
                    str+='<thead>';
                    str+='<tr>';
                    str+='<th><button onclick="sel_check_box()">全反选</button><button onclick="send()">批量删除</button></th>';
                    str+='<th>ID</th>';
                    str+='<th>昵称</th>';
                    str+='<th>姓名</th>';
                    str+='<th>年龄</th>';
                    str+='<th>性别</th>';
                    str+='<th>添加时间</th>';
                    str+='<th>修改时间</th>';
                    str+='<th>所在地区</th>';
                    str+='<th>操作</th>';
                    str+='</tr>';
                    str+='</thead>';
                    $.each(res.data, function(k,v){
                        str+='<tr>';
                        str+='<td id="productTbody"><input type="checkbox" class="check" value="'+v.id+'"></td>';
                        str+='<td>'+v.id+'</td>';
                        str+='<td>'+v.nickname+'</td>';
                        str+='<td>'+v.username+'</td>';
                        str+='<td>'+v.age+'</td>';
                        str+='<td>'+v.sex+'</td>';
                        str+='<td>'+v.create_time+'</td>';
                        str+='<td>'+v.update_time+'</td>';
                        str+='<td>'+v.region_name+'</td>';
                        str+='<td>'+ '<a href="del?id={v.id}">删除</a>'+'<a href="upd?id={v.id}">修改</a>'+'</td>';
                        str+="</td>";
                        str+='</tr>';
                    });
                    $("#arr").html(str);

                }
            }, 'json');
        })
    })

    //区用户
    var area_id = "<?php echo url('jquery/area'); ?>";
    $(document).ready(function(){
        $("#a").blur(function(){
            var region_id = $(this).find("option:selected").attr('data-id');
            // alert(region_id);
            $.post(area_id, {'code' : region_id}, function(res){
                if(2 == res.code)
                {
                    $("thead").hide();
                }
                if(2 == res.code)
                {
                    $("tr").hide();
                    alert("无数据");
                }

                if(1 == res.code){
                    var str="";
                    str+='<thead>';
                    str+='<tr>';
                    str+='<th><button onclick="sel_check_box()">全反选</button><button onclick="send()">批量删除</button></th>';
                    str+='<th>ID</th>';
                    str+='<th>昵称</th>';
                    str+='<th>姓名</th>';
                    str+='<th>年龄</th>';
                    str+='<th>性别</th>';
                    str+='<th>添加时间</th>';
                    str+='<th>修改时间</th>';
                    str+='<th>所在地区</th>';
                    str+='<th>操作</th>';
                    str+='</tr>';
                    str+='</thead>';

                    $.each(res.data, function(k,v){
                        str+='<tr>';
                        str+='<td id="productTbody"><input type="checkbox" class="check" value="'+v.id+'"></td>';
                        str+='<td>'+v.id+'</td>';
                        str+='<td>'+v.nickname+'</td>';
                        str+='<td>'+v.username+'</td>';
                        str+='<td>'+v.age+'</td>';
                        str+='<td>'+v.sex+'</td>';
                        str+='<td>'+v.create_time+'</td>';
                        str+='<td>'+v.update_time+'</td>';
                        str+='<td>'+v.region_name+'</td>';
                        str+='<td>'+ '<a href="del?id={v.id}">删除</a>'+'<a href="upd?id={v.id}">修改</a>'+'</td>';
                        str+="</td>";
                        str+='</tr>';
                    });
                    $("#arr").html(str);

                }
            }, 'json');
        })
    })

    //批量删除
   function send(){
        //alert(11);
        var ids = [];
        $('.check:checked').each(function(){
            ids.push($(this).val());
        })
        if(ids.length <= 0 ){
            alert("至少选择一个");
        }else{
            var s = ids.join(",");
        }
        $.ajax({
            url:'/admin/jquery/delAll',
            data:'ids='+s,
            type:'post',
            success:function(res){
                if(res == 200){
                    //console.log($(this).parents("tr"));
                    $('.check:checked').parents("tr").remove();
                }else{
                    alert('删除失败');
                }
            }
        });
    }

    //即点即改
    $(document).ready(function(){
        $("td").dblclick(function () {
            //alert("1");htm括号不写东西是取值，写了东西是替换
            var td_val=$(this).text();
            var fd_val=$(this).attr("fd");
            var id_val=$(this).parents().attr("id");
            $(this).html("<input type='text' id='dian"+td_val+fd_val+id_val+"' value='"+td_val+"'>");
            $("#dian"+td_val+fd_val+id_val).blur(function(){
                var new_val=$(this).val();
                $(this).parents("td").html(new_val);
                //请求     此为post传值
                $.post("/admin/jquery/save",
                    {
                        text_id:id_val,
                        fd:fd_val,
                        val:new_val
                    },
                    function(data,status){
                        console.log(data);
                    })
            });
        });
    });

    function sel_check_box()
    {
        $("input[type='checkbox']").prop("checked",function(index,attr)
        {
            return !attr;
        });
    }
</script>


